<template>
  <div class="page">
    <div class="item">
      <b-list class="list" split>
        <b-list-item
          v-for="(item,index) in list"
          :key="index"
          
        >{{item}}</b-list-item>
      </b-list>
    </div>
    <div class="item pad">
      <b-list split stripe>
        <b-list-title>这是我的第一个List</b-list-title>
        <b-list-item
          class="list-item"
          v-for="(item,index) in list2"
          :key="index"
          :content="item.content"
          :title="item.title"
          src="https://portrait.gitee.com/uploads/avatars/user/2534/7602838_fudaosheng_1595768126.png!avatar100"
          stripe-background-color="#f6f6f6"
        ></b-list-item>
      </b-list>
    </div>
  </div>
</template>
<script>
export default {
  name: "ListPage",
  data() {
    return {
      list: 40,
      list2: [
        {
          icon: "iconfont icon-github",
          title: "这是title",
          content: "处理中心",
        },
        {
          icon: "iconfont icon-github",
          title: "这是title",
          content: "我的工作台",
        },
        {
          icon: "iconfont icon-github",
          title: "这是title",
          content: "消息中心",
        },
        {
          icon: "iconfont icon-github",
          title: "这是title",
          content: "消息中心",
        },
      ],
    };
  },
};
</script>
<style scoped>
.item {
  height: 400px;
  border: 1px solid red;
  margin: 10px 0px;
  overflow: hidden;
}
.list {
  height: 400px;
}
.list-item:hover{
  background: chartreuse !important;
}
</style>